<template>
  <div class="disposal flex">
      <div class="flexC flex5" style="margin-right:0.825rem;">
        <ul class="flex list_title font_s17 colorF textC">
          <li class="flex2 title_item">社会组织名称</li>
          <li class="flex3 title_item">社会信用代码</li>
          <li class="flex2 title_item">违法内容</li>
          <li class="flex2 title_item">行政处罚种类</li>
          <li class="flex2 title_item">来源方式</li>
          <li class="flex2 title_item">执法人员</li>
          <li class="flex2 title_item">操作</li>
        </ul>
        <ul class="colorF font_s18 Bold list_contentBox">
          <li class="flex list_content textC" v-for="item in dataList" v-bind:key="item.id">
            <p class="flex2 content_item">{{item.shzzmc}}</p>
            <p class="flex3 content_item">{{item.shxydm}}</p>
            <p class="flex2 content_item">{{item.wfnr}}</p>
            <p class="flex2 content_item">{{item.xzcfzl}}</p>
            <p class="flex2 content_item">{{item.lyfs}}</p>
            <p class="flex2 content_item">{{item.cz}}</p>
            <p class="flex2 content_item"><span class="subtitle">查看</span></p>
          </li>
        </ul>
      </div>
      <!------------------ 右边栏 ----------------->
      <div class="flexC flex2 subtitle_right">
        <p class="colorF font_s22 LH4R">
          <img class="verticM" style="height: 1.5rem;" src="../../../assets/img/comprehensive/components/18.png" alt="" />
          <span style="padding-left:0.825rem;">详情</span>
        </p>
        <div class="flex">
          <div style="width:0.125rem; position: relative; left: 3%; background: #3C70B2; z-index: -2;"></div>
          <div class="flexC">
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp;&nbsp;案件受理</p></div>
              <p class="font_s12 colorF  " style="padding: 0rem 3rem;  font-family:Helvetica Neue;font-weight:400;">2019-03-13</p>
              <div class="flex" style="padding-left:1.5rem;">
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
                <div class="flexC JustifyContentFE" style="padding:0rem 0.5rem;"><img src="../../../assets/img/comprehensive/components/20.png" alt="" /></div>
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
              </div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp;&nbsp;立案调查</p></div>
              <p class="font_s12 colorF  " style="padding: 0rem 3rem;font-family:Helvetica Neue;font-weight:400;">2019-03-22</p>
              <div class="flex" style="padding-left:1.5rem;">
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
                <div class="flexC JustifyContentFE" style="padding:0rem 0.5rem;"><img src="../../../assets/img/comprehensive/components/20.png" alt="" /></div>
              </div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp; &nbsp;调查终结</p></div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp; &nbsp;处罚决定</p></div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { shzzmc: '上海玫瑰佳缘婚姻介绍所', shxydm: '52310115575824094N', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海浦东新区大团光耀养老院', shxydm: '52310115782435059W', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海东方桥婚姻介绍所', shxydm: '52310115772866592E', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海浦东新区盐仓社保养老院', shxydm: '5231011579707193XL', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海玫瑰佳缘婚姻介绍所', shxydm: '52310115575824094N', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海浦东新区大团光耀养老院', shxydm: '52310115782435059W', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海东方桥婚姻介绍所', shxydm: '52310115772866592E', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' },
        { shzzmc: '上海浦东新区盐仓社保养老院', shxydm: '5231011579707193XL', wfnr: '两年及两年以上不参加年检', xzcfzl: '撤销登记', lyfs: '年度检查', cz: '王英 毕晓静' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.disposal {
  width: 95%;
  height: 95%;
  margin: 0 auto;
  // padding: 0 2.825rem 2.825rem 2.825rem;
  .list_title {
    background-image: url(../../../assets/img/comprehensive/components/7.png);
    background-size: 100% 100%;
  }
  .title_item {
    line-height: 3.285rem;
  }
  .content_item {
    padding: 1.285rem 0;
    line-height: 1.425rem;
  }
  .list_contentBox {
    height:65vh;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list_contentBox::-webkit-scrollbar {
    background: rgba($color: #fff, $alpha: 0.6);
    border-radius: 10px;
    width: 8px;
  }
  .list_contentBox::-webkit-scrollbar-thumb {
    background: rgba($color: #3659f3, $alpha: 0.8);
    border-radius: 10px;
  }
  .list_content {
    // margin: 1.25rem 0rem;
    background-image: url(../../../assets/img/comprehensive/components/17.png);
    background-size: 100% 100%;
    margin-top: 1.125rem;
    border-radius: 8px;
    .subtitle {
      border: 2px solid rgba(90, 161, 248, 1);
      border-radius: 10px;
      color: #7ff1ff;
      padding: 0.25rem 0.825rem;
      cursor: pointer;
      // vertical-align: middle;
    }
  }
  .list_content:hover {
    background-image: url(../../../assets/img/comprehensive/components/15.png);
    background-size: 100% 100%;
  }
  .subtitle_right {
    height: 69.5vh;
    padding-left: 1rem;
    background: rgba(47, 50, 57, 0.32);
    border: 0.0625rem solid rgba(9, 102, 243, 0.72);
    border-radius: 0.75rem;
    .subtitle_icom {
      padding: 1.2rem;
      font-weight: bold;
      background: url(../../../assets/img/comprehensive/components/19.png) no-repeat;
      background-size: 60% 100%;
    }
  }
}
</style>
